<template>
  <div>
    <h3>vueUse 测试鼠标坐标，事件处理 debounceFilter(防抖)</h3>
    <h3>Mouse:x:{{ x }},y:{{ y }}</h3>

    <span>{{ isDark ? '暗黑' : '浅色' }}</span>
    <el-button @click="toggleDark()">{{ isDark ? '暗黑' : '浅色' }}</el-button>
    <el-switch v-model="isDark" />
    <br />
    <el-button type="primary">Primary</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
</template>

<script setup lang="ts">
import {
  useDark,
  useMouse,
  useToggle,
  useLocalStorage,
  debounceFilter,
  throttleFilter,
} from '@vueuse/core';
// debounce 防抖  多次触发事件只执行一次
// throttle 节流  一定时间内只执行一次

const { x, y } = useMouse({ eventFilter: debounceFilter(100) });

// 设置主题
const isDark = useDark();
const toggleDark = useToggle(isDark);

// localStorage
useLocalStorage(
  'my-key', // key
  { foo: 'bar' }, // value
  { eventFilter: throttleFilter(100) },
);
// console.log(storage, 'sto---');
</script>

<style scoped lang="less"></style>
